<template>
  <div>
    <el-header class="top_button">
      <div class="left-panel">
        <el-button type="success" plain>新增</el-button>
        <el-button type="primary" plain>修改</el-button>
        <el-button type="warning" plain>导出</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input placeholder="查询内容" class="input-with-select">
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="部队名称" value="部队名称" />
                  <el-option label="兵种名称" value="兵种名称" />
                  <el-option label="年度" value="年度" />
                  <el-option label="批次" value="批次" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="searchVisible = true"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          width="180"
        />
      </template>
      <el-table-column fixed="right" label="操作" width="240">
        <template #default>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="openDistributionMap()"
            >第一志愿学历分布统计</el-button
          >
        </template>
      </el-table-column>
    </MyTable>

    <!-- 第一志愿学历分布统计 -->
    <el-dialog v-model="dialogVisible" title="第一志愿学历分布统计" width="30%">
      <div
        ref="distributionMap"
        id="distributionMap"
        style="width: 400px; height: 400px"
      >
        123
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  name: "troops",
  setup() {
    // const distributionMap = ref();
    //   类似vue2的data
    const state = reactive({
      // 弹框控制
      dialogVisible: false,
      // 高级查询
      fiexdSearchForm: false,
      columns: [
        { name: "部队名称", show: true, prop: "forcesName" },
        { name: "兵种名称", show: true, prop: "soldiersName" },
        { name: "年度", show: true, prop: "annual" },
        { name: "批次", show: true, prop: "batch" },
        { name: "任务数", show: true, prop: "jobsNum" },
        { name: "摇号排序值", show: true, prop: "lotterySortValue" },
        { name: "已完成任务数", show: true, prop: "completedTasksNum" },
        { name: "剩余任务数", show: true, prop: "remainingTasksNum" },
        { name: "志愿总填报人数", show: true, prop: "voluntaryApplicantsNum" },
        { name: "一志愿人数", show: true, prop: "applicantsNum" },
        { name: "二志愿人数", show: true, prop: "volunteersTwoNum" },
        { name: "志愿是否互斥", show: true, prop: "volunteerMutex" },
        {
          name: "录取非大学生人数数量",
          show: true,
          prop: "nonUniversityStudentsNum",
        },
        { name: "是否六省区兵种", show: true, prop: "sixProvincesArm" },
        { name: "备注", show: true, prop: "note" },
      ],
      allList: [
        {
          forcesName: "广西武警",
          soldiersName: "陆军",
          annual: "2022",
          batch: 1,
          jobsNum: 10,
          lotterySortValue: 0,
          completedTasksNum: 0,
          remainingTasksNum: 10,
          voluntaryApplicantsNum: 3,
          applicantsNum: 3,
          volunteersTwoNum: 0,
          volunteerMutex: "否",
          nonUniversityStudentsNum: 0,
          sixProvincesArm: "是",
          note: "",
        },
        {
          forcesName: "坦克兵",
          soldiersName: "进藏兵",
          annual: "2022",
          batch: 1,
          jobsNum: 10,
          lotterySortValue: 0,
          completedTasksNum: 0,
          remainingTasksNum: 10,
          voluntaryApplicantsNum: 3,
          applicantsNum: 3,
          volunteersTwoNum: 0,
          volunteerMutex: "否",
          nonUniversityStudentsNum: 0,
          sixProvincesArm: "是",
          note: "",
        },
        {
          forcesName: "火箭军",
          soldiersName: "水兵",
          annual: "2022",
          batch: 1,
          jobsNum: 10,
          lotterySortValue: 0,
          completedTasksNum: 0,
          remainingTasksNum: 10,
          voluntaryApplicantsNum: 3,
          applicantsNum: 3,
          volunteersTwoNum: 0,
          volunteerMutex: "否",
          nonUniversityStudentsNum: 0,
          sixProvincesArm: "是",
          note: "",
        },
      ],
    });

    const Methods = {
      // 编辑表单开始结束  后面改
      changeColumn(columns) {
        this.columns = columns;
        // this.$refs.table.doLayout()
      },
      openDistributionMap() {
        this.dialogVisible = true;
        // distributionMap
        console.log(this.$refs.distributionMap);
        var myChart = echarts.init(this.$refs.distributionMap);
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
    };
    return {
      ...toRefs(state),
      ...Methods,
    };
  },
});
</script>

<style scoped>
.form-closex {
  display: flex;
}
.top_button {
  display: flex;
  justify-content: space-between;
}
.bottom-btn {
  margin-top: 10px;
  margin-left: 28px;
}
</style>